
<template>
    <div :id="maxChartId" style="width: 100%; height:400px;"></div>
</template>

<script>

    import Echarts from 'echarts';
    import { sprintf, vsprintf } from 'sprintf-js';

    export default {
        name: 'maxChart',
        data () {
            return {
                
            };
        },
        props: {
            chartData: Array,
            redWallTime: Number,
            chartTitle: String,
            maxChartId: String
        },
        mounted () {
            this.$nextTick(() => {
                let maxWallTimeChart = Echarts.init(document.getElementById(this.maxChartId));
                let data = [];
                let legendData = [];
                let fire = 'path://M10.031 32c-2.133-4.438-0.997-6.981 0.642-9.376 1.795-2.624 2.258-5.221 2.258-5.221s1.411 1.834 0.847 4.703c2.493-2.775 2.963-7.196 2.587-8.889 5.635 3.938 8.043 12.464 4.798 18.783 17.262-9.767 4.294-24.38 2.036-26.027 0.753 1.646 0.895 4.433-0.625 5.785-2.573-9.759-8.937-11.759-8.937-11.759 0.753 5.033-2.728 10.536-6.084 14.648-0.118-2.007-0.243-3.392-1.298-5.312-0.237 3.646-3.023 6.617-3.777 10.27-1.022 4.946 0.765 8.568 7.555 12.394z';
                let roundRect = 'roundRect';
                this.chartData.forEach((item) => {
                    let icon = item.excl_wt >= this.redWallTime ? fire : roundRect;
                    data.push({
                        name: item.call,
                        type: 'bar',
                        data: [item.excl_wt]
                    });
                    legendData.push({
                        name: item.call,
                        icon: icon
                    });
                });
                let chartTitle = this.chartTitle;
                let option = {
                    title: {
                        text: chartTitle,
                        textStyle: {
                            color: '#495060',
                            fontSize: 16
                        }
                    },
                    legend:{
                        top:'70%',
                        itemWidth: 14,
                        left: '5%',
                        data:legendData,
                        tooltip: {
                            show: true
                        }
                    },
                    grid:{
                        height:'50%'
                    },
                    xAxis: {
                        data: ['']
                    },
                    yAxis: {},
                    series: data,
                    tooltip: {
                        show: true,
                        formatter: (param) => {
                            let item = this.chartData[param.seriesIndex];
                            return sprintf("函数/方法: %s <br/>调用次数: %s <br/>Excl.执行时间: %s μs (%s%%)<br/>Excl.CPU: %s μs (%s%%)<br/>Excl.内存: %s bytes (%s%%)<br/>Excl.内存峰值: %s bytes (%s%%)", item.call, item.ct, item.excl_wt, item.excl_wt_rate, item.excl_cpu, item.excl_cpu_rate, item.excl_mu, item.excl_mu_rate, item.excl_pmu, item.excl_pmu_rate);
                        }
                    }
                };
                maxWallTimeChart.setOption(option);
                window.addEventListener('resize', function () {
                    maxWallTimeChart.resize();
                });
            });
        }
    };
</script>